<template>
	<view>
		<view class='order-tab-box'>
			<view class="order-tab"  v-for="(item,index) in tabData" :key="index" :class="tab_index == index ? 'order-tab-current' : ''" @tap="tab_click(index)">{{item.name}}</view>
		</view>
		<view class="order-list-box">
			<view class="item">
			    <navigator open-type="navigate" :url="tab_index==1?'/pages/jewel/order/bill?type=0':'/pages/jewel/order/bill?type=2'" class="m-log-info" v-for="(item, index) in countData" :key="index">
			        <view class="m-log-info-l">
			            <view class="u-log-title">{{item.type_text}}({{item.is_accept_text}})</view>
			            <view class="u-log-date">{{item.create_time}}</view>
			        </view>
			        <view class="m-log-info-r">
						<view class="money">{{item.money}}</view>
					</view>
			    </navigator>
			</view>
		</view>
		<view class="m-loading" v-if="bIsShowLoading">
		    <image src="../../../static/images/loading.gif" mode="widthFix"></image>
		    <text>加载中</text>
		</view>
		<view class="m-no-data" v-if="showNodata">
			暂无数据
		</view>
	</view>
</template>

<script>
	import hl from '@/common/common_zb.js';
	export default {
		data() {
			return {
				tab_index: 1,	// 显示头部内容索引
				page: 1,	// 当前页数
				total_pages: 1,	// 页数总数
				bIsShowLoading: false,
				showNodata: false,
				tabData:[],
				countData:[]
			}
		},
		onLoad() {
			let that = this
			hl.get('Maker/incomeType',{},true,function(res){
				that.tabData = res.data.data
			})
			that.getData()
		},
		
		methods: {
			getData(type){
				let that = this
				if(that.page <= that.total_pages){
					that.bIsShowLoading = true
					hl.get('Maker/incomeCount',{income_type:that.tab_index},true,function(res){
						if(res.data.count === 0){
							that.showNodata = true
						}else{
							that.showNodata = false
						}
						if (type == 'plus') {
							that.countData = that.countData.concat(res.data.data);
						} else {
							that.countData = res.data.data;
							that.total_pages = res.data.total_pages;
							if(that.total_pages == 0) that.total_pages = 1
						}
						that.bIsShowLoading = false
					})
					
				}
			},
			// 选择显示的内容
			tab_click(index){
				this.tab_index = index
				this.getData()
			}
		},
		onReachBottom() {
			this.page = ++this.page;
		    this.getData('plus');
		}
	}
</script>
<style>
	.order-tab-box {
		height: 90upx;
		width: 100%;
		background: #f8f8f8;
		display: flex;
		display: -webkit-flex;
		position: fixed;
		left: 0;
		top: 0;
		/* #ifdef H5 */
		top: 88upx;
		/* #endif */
		z-index: 9;
	}

	.order-tab {
		height: 100%;
		line-height: 90rpx;
		flex: 1;
		-webkit-flex: 1;
		text-align: center;
		font-size: 30rpx;
		color: #666
	}

	.order-tab-current {
		color: #bea374;
		height: 88rpx;
		border-bottom: 1rpx solid #bea374;
		width: auto;
	}

	.order-list-box {
		width: 100%;
		height: 100%;
		overflow: hidden;
		margin-top: 91upx;
	}
	.m-log-info::after {
		content: '';
		position: absolute;
		top: 26upx;
	    width: 6upx;
	    height: 37upx;
		left: -20upx;
		background: #D71511;
	}
	
	.m-log-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
	    width: 92%;
		margin-left: 40upx;
		padding-bottom: 20upx;
	    border-bottom: 1px solid #e5e5e5;
		position: relative;
		padding-top: 20upx;
	}
	.u-log-title {
	    font-size: 32upx;
	}
	
	.u-log-date {
	    font-size: 24upx;
	    color: #aaa;
	}
	.m-no-data{
		padding: 50upx 0;
		text-align: center;
	}
</style>
